<template>
	<view style="display: flex;flex-direction: column;min-height: 100vh;">
		<view>
			<sunMenu></sunMenu>
			<view class="page-container" style="user-select: text;"> 
				<view class="side-menu" v-if="!isMobile">
					<view class="menu-item" v-for="(item, index) in menuItems" :key="index"
						:class="{ active: currentTab === item.id }" @click="switchTab(item.id)">
						{{ item.name }}
					</view>
				</view> 
				<view class="main-content" :class="{ 'with-menu': !isMobile }">
					<view style="padding-bottom: 20rpx;"> 
						<view class="mobile-menu" v-if="isMobile">
							<view class="menu-item" v-for="(item, index) in menuItems" :key="index"
								:class="{ active: currentTab === item.id }" @click="switchTab(item.id)">
								{{ item.name }}
							</view>
						</view>
						<view class="register-container" v-if="currentTab === 'info'">
							<h1>會員資訊 / Member Info</h1>
							<view class="form-group">
								<label><text class="required"></text>會員等級</label>
								<view class="vip-level">{{ getMemberLevel(formData.points) }}</view>
							</view>
							<view class="form-group">
								<label><text class="required"></text>會員折扣碼</label>
								<view class="vip-level">{{ formData.vipCode }}</view>
							</view>
							<view class="form-group">
								<label><text class="required">*</text>姓名 / Name</label>
								<input type="text" v-model="formData.nickName" class="uni-input" />
							</view>
			
							<view class="form-group">
								<label><text class="required">*</text>電子信箱 / Email</label>
								<input type="email" v-model="formData.email" class="uni-input" />
							</view>
			
							<view class="form-row">
								<view class="form-group half">
									<label><text class="required">*</text>國籍 / Nationality</label>
									<view class="custom-select" :class="{ 'active': isNationalityOpen }">
										<view class="select-trigger" @click="toggleNationality"
											:class="{ 'placeholder': !formData.nationality }">
											{{ selectedNationalityLabel || '選擇國籍' }}
											<text class="select-arrow">▼</text>
										</view>
										<view class="select-dropdown" v-show="isNationalityOpen">
											<view class="select-options">
												<view v-for="nation in nationalities" :key="nation.value" class="select-option"
													:class="{ 'selected': formData.nationality === nation.value }"
													@click="selectNationality(nation)">
													{{ nation.label }}
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="form-group half">
									<label><text class="required">*</text>身分證字號(護照號碼) / ID Number(Passport No)</label>
									<input type="text" v-model="formData.idNumber" />
								</view>
							</view> 
							<view class="form-row">
								<view class="form-group half">
									<label><text class="required">*</text>出生年月日 / Birthday</label>
									<view class="birthday-selects">
										<view class="custom-select" :class="{ 'active': isYearOpen }">
											<view class="select-trigger" @click="toggleYear">
												{{ formData.birthYear || '年' }}
												<text class="select-arrow">▼</text>
											</view>
											<view class="select-dropdown" v-show="isYearOpen">
												<view class="select-options">
													<view v-for="year in years" :key="year" class="select-option"
														:class="{ 'selected': formData.birthYear === year }"
														@click="selectYear(year)">
														{{ year }}
													</view>
												</view>
											</view>
										</view>
			
										<view class="custom-select" :class="{ 'active': isMonthOpen }">
											<view class="select-trigger" @click="toggleMonth">
												{{ formData.birthMonth ? formData.birthMonth.toString().padStart(2, '0') : '月' }}
												<text class="select-arrow">▼</text>
											</view>
											<view class="select-dropdown" v-show="isMonthOpen">
												<view class="select-options">
													<view v-for="month in months" :key="month" class="select-option"
														:class="{ 'selected': formData.birthMonth === month }"
														@click="selectMonth(month)">
														{{ month.toString().padStart(2, '0') }}
													</view>
												</view>
											</view>
										</view>
			
										<view class="custom-select" :class="{ 'active': isDayOpen }">
											<view class="select-trigger" @click="toggleDay">
												{{ formData.birthDay ? formData.birthDay.toString().padStart(2, '0') : '日' }}
												<text class="select-arrow">▼</text>
											</view>
											<view class="select-dropdown" v-show="isDayOpen">
												<view class="select-options">
													<view v-for="day in days" :key="day" class="select-option"
														:class="{ 'selected': formData.birthDay === day }"
														@click="selectDay(day)">
														{{ day.toString().padStart(2, '0') }}
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="form-group half">
									<label><text class="required">*</text>性別 / Gender</label>
									<view class="radio-group">
										<view class="radio-item" :class="{ active: formData.sex === '0' }"
											@click="selectSex('0')">
											<view class="radio-circle">
												<view class="radio-inner"></view>
											</view>
											<text>男</text>
										</view>
										<view class="radio-item" :class="{ active: formData.sex === '1' }"
											@click="selectSex('1')">
											<view class="radio-circle">
												<view class="radio-inner"></view>
											</view>
											<text>女</text>
										</view>
									</view>
								</view>
							</view>
			
							<view class="form-row">
								<view class="form-group half">
									<label><text class="required">*</text>聯絡電話(手機) / Mobile</label>
									<input type="tel" v-model="formData.phonenumber" />
								</view>
								<view class="form-group half">
									<label>聯絡電話(市話) / TEL</label>
									<input type="tel" v-model="formData.tel" />
								</view>
							</view>
			
							<view class="form-row">
								<view class="form-group half">
									<label><text class="required">*</text>縣市 / City</label>
									<view class="custom-select" :class="{ 'active': isCityOpen }">
										<view class="select-trigger" @click="toggleCity">
											{{ selectedCityLabel || '選擇縣市' }}
											<text class="select-arrow">▼</text>
										</view>
										<view class="select-dropdown" v-show="isCityOpen">
											<view class="select-options">
												<view v-for="city in cities" :key="city.value" class="select-option"
													:class="{ 'selected': formData.city === city.value }"
													@click="selectCity(city)">
													{{ city.label }}
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="form-group half">
									<label><text class="required">*</text>鄉鎮市區 / Area</label>
									<view class="custom-select" :class="{ 'active': isAreaOpen }">
										<view class="select-trigger" @click="toggleArea"
											:class="{ 'disabled': !formData.city }">
											{{ selectedAreaLabel || '選擇地區' }}
											<text class="select-arrow">▼</text>
										</view>
										<view class="select-dropdown" v-show="isAreaOpen && formData.city">
											<view class="select-options">
												<view v-for="area in areas" :key="area.value" class="select-option"
													:class="{ 'selected': formData.area === area.value }"
													@click="selectArea(area)">
													{{ area.label }}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
			
							<view class="form-row">
								<view class="form-group half">
									<label><text class="required">*</text>路名 / Road</label>
									<view class="custom-select" :class="{ 'active': isRoadOpen }">
										<view class="select-trigger" @click="toggleRoad"
											:class="{ 'disabled': !formData.area }">
											{{ selectedRoadLabel || '選擇路名' }}
											<text class="select-arrow">▼</text>
										</view>
										<view class="select-dropdown" v-show="isRoadOpen && formData.area">
											<view class="select-options">
												<view v-for="road in roads" :key="road.value" class="select-option"
													:class="{ 'selected': formData.road === road.value }"
													@click="selectRoad(road)">
													{{ road.label }}
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="form-group half">
									<label><text class="required">*</text>路 / 巷 / 弄 / 號 / Road / Lane / Number</label>
									<input type="text" v-model="formData.address" />
								</view>
							</view>
			
							<view class="form-row">
								<view class="form-group half">
									<label>緊急連絡人 / Emergency Contact Person</label>
									<input type="text" v-model="formData.emergencyContact" />
								</view>
								<view class="form-group half">
									<label>緊急連絡人電話 / Emergency Mobile</label>
									<input type="tel" v-model="formData.emergencyPhone" />
								</view>
							</view>
							<view style="color: red;margin-bottom: 38rpx;">
								* 需要修改密碼才需要填寫 *
							</view>
							<view class="form-row">
								<view class="form-group half">
									<label><text class="required">*</text>密碼 / Password</label>
									<input type="password" v-model="formData.password" />
								</view>
								<view class="form-group half">
									<label><text class="required">*</text>密碼確認 / Confirm Password</label>
									<input type="password" v-model="formData.confirmPassword" />
								</view>
							</view>
							<button class="submit-btn" @click="onSubmit">送出</button>
						</view>
			
						<!-- Signup Activities Tab -->
						<view class="register-container" v-if="currentTab === 'signup'">
							<h1>報名活動</h1>
							<view class="signup-list">
								<view v-if="signupList.length === 0" class="empty-state">
									暫無可報名活動
								</view>
								<view v-else class="signup-cards">
									<view v-for="(item, index) in signupList" :key="index" class="signup-card" @click="goToDetail(item)">
										<view class="card-header">
											<text class="order-number">訂單號：{{item.orderNumber}}</text> 
											<text :class="['status-tag', getStatusClass(item.status)]">{{getStatusText(item.status)}}</text>
										</view>
										<view class="card-content"> 
											<view class="info-row" v-if="item.teamName">
												<text class="label">團隊訂單：</text>
												<text class="value">{{item.teamName}}</text>
												<text style="color: red;" class="value">{{item.isLead==1?'團長':''}}</text>
											</view>
											<view class="info-row">
												<text class="label">賽事組別：</text>
												<text class="value">{{item.raceCategoriesName}}</text>
											</view>
											<view class="info-row">
												<text class="label">報名者：</text>
												<text class="value">{{item.nickName}}</text>
											</view>
											<view class="info-row">
												<text class="label">報名費用：</text>
												<text class="value price">NT$ {{item.payMoney}}</text>
											</view>
											<view class="info-row">
												<text class="label">報名時間：</text>
												<text class="value">{{formatDate(item.createTime)}}</text>
											</view>
											<view class="info-row">
												<text class="label">取件地點：</text>
												<text class="value">{{item.pickupLocation}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
			
						<!-- History Scores Tab -->
						<view class="register-container" v-if="currentTab === 'history'">
							<h1>歷史成績</h1>
							<view class="history-list">
								<view class="empty-state">
									暫無歷史成績記錄
								</view>
							</view>
						</view>
					</view>
				</view> 
			</view>
			
		</view>
		<view class="footer">
			<text class="footer-text">© 2025 夏璽玥網路有限公司 版權所有 XIA AKOYA INC. All Rights Reserved. 統一編號90370186</text>
			 
		</view>
	</view>
</template>

<script>
	import sunMenu from '../components/sun-menu/sun-menu.vue'
	import citiesData from '@/static/data/cities.json'
	import areasData from '@/static/data/areas.json'
	import roadsData from '@/static/data/roads.json'
	import {
		updateUser,getInfo
	} from '@/api/login'
	import {
		orderList
	} from '@/api/api.js'
	export default {
		components: {
			sunMenu
		},
		data() { 
			const birthday = this.$store.state.user.info.birthday;
			let birthYear = '';
			let birthMonth = '';
			let birthDay = ''; 
			if (birthday) {
				const [year, month, day] = birthday.split('-');
				birthYear = parseInt(year);
				birthMonth = parseInt(month);
				birthDay = parseInt(day);
			} 
			return {
				formData: {
					vipCode: this.$store.state.user.info.vipCode,
					nickName: this.$store.state.user.info.nickName,
					email: this.$store.state.user.info.email,
					nationality: this.$store.state.user.info.nationality,
					idNumber: this.$store.state.user.info.idNumber,
					sex: this.$store.state.user.info.sex,
					address: this.$store.state.user.info.address,
					emergencyContact: this.$store.state.user.info.emergencyContact,
					emergencyPhone: this.$store.state.user.info.emergencyPhone,
					phonenumber: this.$store.state.user.info.phonenumber,
					tel: this.$store.state.user.info.tel,
					birthYear: birthYear,
					birthMonth: birthMonth,
					birthDay: birthDay,
					cityLabel: this.$store.state.user.info.cityLabel,
					areaLabel: this.$store.state.user.info.areaLabel,
					roadLabel: this.$store.state.user.info.roadLabel,
				},
				nationalities: [{
						value: 'AFGHANISTAN',
						label: 'AFGHANISTAN'
					},
					{
						value: 'ALBANIA',
						label: 'ALBANIA'
					},
					{
						value: 'ALGERIA',
						label: 'ALGERIA'
					},
					{
						value: 'ARGENTINA',
						label: 'ARGENTINA'
					},
					{
						value: 'AUSTRALIA',
						label: 'AUSTRALIA'
					},
					{
						value: 'AUSTRIA',
						label: 'AUSTRIA'
					},
					{
						value: 'BANGLADESH',
						label: 'BANGLADESH'
					},
					{
						value: 'BELGIUM',
						label: 'BELGIUM'
					},
					{
						value: 'BRAZIL',
						label: 'BRAZIL'
					},
					{
						value: 'CAMBODIA',
						label: 'CAMBODIA'
					},
					{
						value: 'CANADA',
						label: 'CANADA'
					},
					{
						value: 'CHILE',
						label: 'CHILE'
					},
					{
						value: 'CHINA',
						label: 'CHINA'
					},
					{
						value: 'COLOMBIA',
						label: 'COLOMBIA'
					},
					{
						value: 'CZECH',
						label: 'CZECH REPUBLIC'
					},
					{
						value: 'DENMARK',
						label: 'DENMARK'
					},
					{
						value: 'EGYPT',
						label: 'EGYPT'
					},
					{
						value: 'FINLAND',
						label: 'FINLAND'
					},
					{
						value: 'FRANCE',
						label: 'FRANCE'
					},
					{
						value: 'GERMANY',
						label: 'GERMANY'
					},
					{
						value: 'GREECE',
						label: 'GREECE'
					},
					{
						value: 'HONG_KONG',
						label: 'HONG KONG'
					},
					{
						value: 'HUNGARY',
						label: 'HUNGARY'
					},
					{
						value: 'ICELAND',
						label: 'ICELAND'
					},
					{
						value: 'INDIA',
						label: 'INDIA'
					},
					{
						value: 'INDONESIA',
						label: 'INDONESIA'
					},
					{
						value: 'IRAN',
						label: 'IRAN'
					},
					{
						value: 'IRAQ',
						label: 'IRAQ'
					},
					{
						value: 'IRELAND',
						label: 'IRELAND'
					},
					{
						value: 'ISRAEL',
						label: 'ISRAEL'
					},
					{
						value: 'ITALY',
						label: 'ITALY'
					},
					{
						value: 'JAPAN',
						label: 'JAPAN'
					},
					{
						value: 'JORDAN',
						label: 'JORDAN'
					},
					{
						value: 'KAZAKHSTAN',
						label: 'KAZAKHSTAN'
					},
					{
						value: 'KENYA',
						label: 'KENYA'
					},
					{
						value: 'KOREA',
						label: 'KOREA'
					},
					{
						value: 'KUWAIT',
						label: 'KUWAIT'
					},
					{
						value: 'LAOS',
						label: 'LAOS'
					},
					{
						value: 'MALAYSIA',
						label: 'MALAYSIA'
					},
					{
						value: 'MALDIVES',
						label: 'MALDIVES'
					},
					{
						value: 'MEXICO',
						label: 'MEXICO'
					},
					{
						value: 'MONGOLIA',
						label: 'MONGOLIA'
					},
					{
						value: 'MOROCCO',
						label: 'MOROCCO'
					},
					{
						value: 'MYANMAR',
						label: 'MYANMAR'
					},
					{
						value: 'NEPAL',
						label: 'NEPAL'
					},
					{
						value: 'NETHERLANDS',
						label: 'NETHERLANDS'
					},
					{
						value: 'NEW_ZEALAND',
						label: 'NEW ZEALAND'
					},
					{
						value: 'NIGERIA',
						label: 'NIGERIA'
					},
					{
						value: 'NORWAY',
						label: 'NORWAY'
					},
					{
						value: 'PAKISTAN',
						label: 'PAKISTAN'
					},
					{
						value: 'PANAMA',
						label: 'PANAMA'
					},
					{
						value: 'PERU',
						label: 'PERU'
					},
					{
						value: 'PHILIPPINES',
						label: 'PHILIPPINES'
					},
					{
						value: 'POLAND',
						label: 'POLAND'
					},
					{
						value: 'PORTUGAL',
						label: 'PORTUGAL'
					},
					{
						value: 'QATAR',
						label: 'QATAR'
					},
					{
						value: 'ROMANIA',
						label: 'ROMANIA'
					},
					{
						value: 'RUSSIA',
						label: 'RUSSIA'
					},
					{
						value: 'SAUDI_ARABIA',
						label: 'SAUDI ARABIA'
					},
					{
						value: 'SINGAPORE',
						label: 'SINGAPORE'
					},
					{
						value: 'SOUTH_AFRICA',
						label: 'SOUTH AFRICA'
					},
					{
						value: 'SPAIN',
						label: 'SPAIN'
					},
					{
						value: 'SRI_LANKA',
						label: 'SRI LANKA'
					},
					{
						value: 'SWEDEN',
						label: 'SWEDEN'
					},
					{
						value: 'SWITZERLAND',
						label: 'SWITZERLAND'
					},
					{
						value: 'TAIWAN',
						label: 'TAIWAN'
					},
					{
						value: 'THAILAND',
						label: 'THAILAND'
					},
					{
						value: 'TURKEY',
						label: 'TURKEY'
					},
					{
						value: 'UKRAINE',
						label: 'UKRAINE'
					},
					{
						value: 'UAE',
						label: 'UNITED ARAB EMIRATES'
					},
					{
						value: 'UK',
						label: 'UNITED KINGDOM'
					},
					{
						value: 'USA',
						label: 'UNITED STATES'
					},
					{
						value: 'UZBEKISTAN',
						label: 'UZBEKISTAN'
					},
					{
						value: 'VENEZUELA',
						label: 'VENEZUELA'
					},
					{
						value: 'VIETNAM',
						label: 'VIETNAM'
					},
					{
						value: 'YEMEN',
						label: 'YEMEN'
					}
				],
				years: Array.from({
					length: 102
				}, (_, i) => 2024 - i),
				months: Array.from({
					length: 12
				}, (_, i) => i + 1),
				days: Array.from({
					length: 31
				}, (_, i) => i + 1),
				cities: citiesData.cities,
				cityAreas: areasData,
				cityRoads: roadsData,
				areas: [],
				roads: [],
				isNationalityOpen: false,
				isYearOpen: false,
				isMonthOpen: false,
				isDayOpen: false,
				isCityOpen: false,
				isAreaOpen: false,
				isRoadOpen: false,
				isMobile: false,
				currentTab: 'info',
				menuItems: [{
						id: 'info',
						name: '會員資訊'
					},
					{
						id: 'signup',
						name: '報名活動'
					},
					{
						id: 'history',
						name: '歷史成績'
					},
					{
						id: 'logout',
						name: '會員登出'
					}
				],
				signupList: []
			}
		},
		computed: {
			selectedNationalityLabel() {
				const selected = this.nationalities.find(n => n.value === this.formData.nationality)
				return selected ? selected.label : ''
			},
			selectedCityLabel() {
				return this.formData.cityLabel || '';
			},
			selectedAreaLabel() {
				return this.formData.areaLabel || '';
			},
			selectedRoadLabel() {
				return this.formData.roadLabel || '';
			}, 
		},
		watch: {
			'formData.birthYear'() {
				this.adjustDays();
			},
			'formData.birthMonth'() {
				this.adjustDays();
			},
			'formData.city'(newCity) {
				if (newCity) {
					this.areas = this.cityAreas[newCity] || [];
				} else {
					this.areas = [];
				}
				this.formData.area = '';
				this.formData.road = '';
				this.roads = [];
			},
			'formData.area'(newArea) {
				if (newArea && this.formData.city) {
					this.roads = this.cityRoads[this.formData.city]?.[newArea] || [];
				} else {
					this.roads = [];
				}
				this.formData.road = '';
			}
		},
		onShow() {
			uni.setStorageSync("activeId",'')
			getInfo().then(res=>{
				this.formData.points = res.user.points
			})
		},
		methods: {
			getMemberLevel(points) {
				if (points >= 157) {
					return '藍月';
				} else if (points >= 91) {
					return '灰月';
				} else if (points >= 46) {
					return '滿月';
				} else if (points >= 19) {
					return '銀月';
				} else {
					return '新月';
				}
			},
			validateForm() {
				const requiredFields = {
					nickName: '姓名',
					nationality: '國籍',
					sex: '性別',
					birthYear: '出生年',
					birthMonth: '出生月',
					birthDay: '出生日',
					phonenumber: '手機號碼',
					email: 'Email',
					cityLabel: '縣市',
					areaLabel: '地區',
					roadLabel: '路名',
					address: '詳細地址',
				};
				let errors = [];
				// 台灣手機號碼正則表達式
				const taiwanMobileRegex = /^09\d{8}$/;

				// 檢查每個必填欄位
				for (const [field, label] of Object.entries(requiredFields)) {
					if (!this.formData[field]) {
						errors.push(`${label}不能為空`);
					}
				}

				// 電子郵箱格式驗證
				const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				if (this.formData.email && !emailRegex.test(this.formData.email)) {
					errors.push('請輸入有效的電子郵箱地址');
				}

				// 手機號碼格式驗證
				if (this.formData.phonenumber && !taiwanMobileRegex.test(this.formData.phonenumber)) {
					errors.push('請輸入有效的台灣手機號碼 (09開頭共10碼)');
				}

				// 緊急聯絡人電話格式驗證 (如果填寫了)
				if (this.formData.emergencyPhone && !taiwanMobileRegex.test(this.formData.emergencyPhone)) {
					errors.push('請輸入有效的緊急連絡人台灣手機號碼 (09開頭共10碼)');
				}

				// 只有當密碼欄位有輸入時才進行密碼相關驗證
				if (this.formData.password != "" && this.formData.password != undefined) {
					if (this.formData.confirmPassword == "" || this.formData.confirmPassword == undefined) {
						errors.push('確認密碼不能為空');
					}
					if (this.formData.password !== this.formData.confirmPassword) {
						errors.push('密碼與確認密碼不一致');
					}
				}

				if (this.formData.phonenumber == '' || this.formData.phonenumber == undefined) {
					errors.push('手機號不能爲空');
				}
				return {
					isValid: errors.length === 0,
					errors
				};
			},
			onSubmit() {
				const validation = this.validateForm();
				if (!validation.isValid) {
					// 顯示錯誤信息
					console.log('表單驗證錯誤：', validation.errors);
					uni.showToast({
						title: validation.errors[0],
						icon: 'none',
						duration: 2000
					});
					return;
				}
				// 格式化生日和地址
				const birthday =
					`${this.formData.birthYear}-${String(this.formData.birthMonth).padStart(2, '0')}-${String(this.formData.birthDay).padStart(2, '0')}`;
				this.formData.birthday = birthday
				// 驗證通過的提示
				this.$modal.loading("更新中，请耐心等待...")
				this.updateUser()
			},
			// 用户更新
			async updateUser() {
				this.formData.userId = this.$store.state.user.info.userId
				updateUser(this.formData).then(res => {
					this.$modal.closeLoading()
					this.loginSuccess()
				})
			},
			loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					this.$tab.reLaunch('/pages/myVip')
				})
			},
			selectSex(value) {
				this.formData.sex = value;
			},
			// 可選：添加搜索功能
			searchNationality(searchText) {
				return this.nationalities.filter(nation =>
					nation.label.toLowerCase().includes(searchText.toLowerCase())
				);
			},
			adjustDays() {
				const year = this.formData.birthYear;
				const month = this.formData.birthMonth;

				if (!year || !month) return;

				const daysInMonth = new Date(year, month, 0).getDate();
				this.days = Array.from({
					length: daysInMonth
				}, (_, i) => i + 1);

				// 如果選中的日期超過當月最大天數，重置日期
				if (this.formData.birthDay > daysInMonth) {
					this.formData.birthDay = '';
				}
			},
			onCityChange() {
				this.formData.area = '';
				this.areas = this.cityAreas[this.formData.city] || [];
			},
			toggleNationality() {
				this.isNationalityOpen = !this.isNationalityOpen
			},
			selectNationality(nation) {
				this.formData.nationality = nation.label
				this.isNationalityOpen = false
			},
			// 點擊外部時關閉下拉框
			closeNationality(e) {
				if (!e.target.closest('.custom-select')) {
					this.isNationalityOpen = false
				}
			},
			toggleYear() {
				this.isYearOpen = !this.isYearOpen
			},
			selectYear(year) {
				this.formData.birthYear = year
				this.isYearOpen = false
			},
			toggleMonth() {
				this.isMonthOpen = !this.isMonthOpen
			},
			selectMonth(month) {
				this.formData.birthMonth = month
				this.isMonthOpen = false
			},
			toggleDay() {
				this.isDayOpen = !this.isDayOpen
			},
			selectDay(day) {
				this.formData.birthDay = day
				this.isDayOpen = false
			},
			toggleCity() {
				this.isCityOpen = !this.isCityOpen
			},
			selectCity(city) {
				this.formData.city = city.value;
				this.formData.cityLabel = city.label;
				this.isCityOpen = false;

				// Update areas based on selected city
				this.areas = this.cityAreas[city.value] || [];
				this.formData.area = ''; // Reset area selection
				this.formData.areaLabel = ''; // Reset area label

				// Reset roads when city changes
				this.roads = [];
				this.formData.road = ''; // Reset road selection
				this.formData.roadLabel = ''; // Reset road label
			},
			toggleArea() {
				this.isAreaOpen = !this.isAreaOpen
			},
			selectArea(area) {
				this.formData.area = area.value;
				this.formData.areaLabel = area.label;
				this.isAreaOpen = false;

				// Update roads based on selected area
				this.roads = this.cityRoads[this.formData.city]?.[area.value] || [];
				this.formData.road = ''; // Reset road selection
				this.formData.roadLabel = ''; // Reset road label
			},
			toggleRoad() {
				this.isRoadOpen = !this.isRoadOpen
			},
			selectRoad(road) {
				this.formData.road = road.value;
				this.formData.roadLabel = road.label;
				this.isRoadOpen = false;
			},
			switchTab(tabId) {
				if (tabId === 'logout') {
					// 处理登出逻辑
					this.handleLogout();
					return;
				}
				this.currentTab = tabId;

				// 处理不同标签页的加载逻辑
				switch (tabId) {
					case 'signup':
						this.loadSignupActivities();
						break;
					case 'history':
						this.loadHistoryScores();
						break;
				}
			},
			checkDevice() {
				this.isMobile = window.innerWidth <= 768;
			},
			loadSignupActivities() {
				orderList().then(res => {
					this.signupList = res.rows || [];
				}).catch(error => {
					console.error('加載報名活動失敗：', error);
					uni.showToast({
						title: '加載失敗',
						icon: 'none'
					});
				});
			},
			loadHistoryScores() {
				// 添加加载历史成绩的逻辑
				console.log('Loading history scores...');
			},
			// 登出处理方法
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '確定要登出嗎？',
					success: (res) => {
						if (res.confirm) {
							// 执行登出操作
							this.$store.dispatch('LogOut').then(() => {
								uni.reLaunch({
									url: '/pages/myLogin'
								});
							});
						}
					}
				});
			},
			getStatusText(status) {
				const statusMap = {
					'0': '待付款',
					'1': '已付款',
					'2': '已退款',
					'3': '已取消'
				};
				return statusMap[status] || '未知狀態';
			},
			getStatusClass(status) {
				const classMap = {
					'0': 'status-pending',
					'1': 'status-paid',
					'2': 'status-refunded',
					'3': 'status-cancelled'
				};
				return classMap[status] || 'status-unknown';
			},
			formatDate(dateString) {
				if (!dateString) return '';
				const date = new Date(dateString);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			goToDetail(item) {
				uni.navigateTo({
					url: `/pages/orderDetail?id=${item.id}`
				});
			}
		},
		mounted() {
			// Initialize areas based on selected city
			if (this.formData.city) {
				this.areas = this.cityAreas[this.formData.city] || [];
			}

			// Initialize roads based on selected area
			if (this.formData.city && this.formData.area) {
				this.roads = this.cityRoads[this.formData.city]?.[this.formData.area] || [];
			}

			document.addEventListener('click', this.closeNationality);
			this.checkDevice();
			window.addEventListener('resize', this.checkDevice);
		},
		beforeDestroy() {
			document.removeEventListener('click', this.closeNationality)
			window.removeEventListener('resize', this.checkDevice);
		}
	}
</script>

<style>
	.register-container {
		width: 70%;
		padding: 40px;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		float: left;
	}

	h1 {
		text-align: center;
		color: #333;
		margin-bottom: 40px;
		font-size: 28px;
		font-weight: 600;
	}

	.form-group {
		margin-bottom: 25px;
	}

	.form-row {
		display: flex;
		gap: 30px;
		margin-bottom: 10px;
	}

	.half {
		width: 50%;
	}

	label {
		display: block;
		margin-bottom: 8px;
		color: #555;
		font-size: 14px;
		font-weight: 500;
		cursor: text;
		user-select: text;
	}

	.required {
		color: #ff4d4f;
		margin-right: 4px;
	}

	/* 統一輸入框樣式 */
	.uni-input,
	input,
	select {
		width: 100%;
		height: 44px;
		line-height: 44px;
		padding: 0 12px;
		border: 1px solid #e2e8f0;
		border-radius: 6px;
		font-size: 14px;
		color: #333;
		background-color: #f8fafc;
		box-sizing: border-box;
	}

	/* 生日選擇器樣式 */
	.birthday-selects {
		display: flex;
		gap: 12px;
	}

	.birthday-selects select {
		flex: 1;
		text-align: center;
		padding-right: 24px;
		/* 為下拉箭頭留出空間 */
	}

	/* 下拉框樣式 */
	.birthday-selects .uni-input {
		height: 44px;
		border: 1px solid #e2e8f0;
		border-radius: 6px;
		background-color: #f8fafc;
		font-size: 14px;
		color: #333;
		cursor: pointer;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 8px center;
	}

	/* 下拉框懸停效果 */
	.birthday-selects .uni-input:hover {
		border-color: #4299e1;
	}

	/* 下拉框聚焦效果 */
	.birthday-selects .uni-input:focus {
		border-color: #4299e1;
		outline: none;
		box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
	}

	/* 選項樣式 */
	.birthday-selects .uni-input option {
		padding: 8px;
	}

	/* 性別選擇器樣式 */
	.radio-group {
		display: flex;
		gap: 20px;
		margin-top: 40rpx;
	}

	.radio-item {
		display: flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;
	}

	.radio-circle {
		width: 18px;
		height: 18px;
		border: 1px solid #dcdfe6;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;
	}

	.radio-inner {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #81D8D0;
		opacity: 0;
		transition: all 0.3s;
	}

	.radio-item.active .radio-circle {
		border-color: #81D8D0;
	}

	.radio-item.active .radio-inner {
		opacity: 1;
	}

	/* 提交按鈕樣式 */
	.submit-btn {
		width: 100%;
		height: 44px;
		line-height: 44px;
		background-color: red;
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 16px;
		font-weight: 500;
		margin-top: 20px;
		text-align: center;
	}

	.submit-btn:active {
		background-color: #2c5282;
	}

	/* 錯誤狀態 */
	.uni-input.error,
	input.error,
	select.error {
		border-color: #ff4d4f;
		background-color: #fff2f0;
	}

	/* 禁用狀態 */
	.uni-input[disabled],
	input[disabled],
	select[disabled] {
		background-color: #f5f5f5;
		color: #999;
	}

	/* 密碼輸入框 */
	input[type="password"] {
		letter-spacing: 4px;
	}

	/* 下拉選擇框樣式 */
	select {
		width: 100%;
		height: 44px;
		padding: 0 12px;
		border: 1px solid #e2e8f0;
		border-radius: 6px;
		background-color: #f8fafc;
		font-size: 14px;
		color: #333;
		cursor: pointer;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 12px center;
		padding-right: 30px;
	}

	select:disabled {
		background-color: #f5f5f5;
		cursor: not-allowed;
		opacity: 0.7;
	}

	select:hover:not(:disabled) {
		border-color: #4299e1;
	}

	select:focus {
		border-color: #4299e1;
		outline: none;
		box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
	}


	.custom-select {
		position: relative;
		width: 100%;
	}

	.select-trigger {
		height: 44px;
		line-height: 40px;
		padding: 0 30px 0 12px;
		/* 右側留出箭頭空間 */
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		background-color: #fff;
		cursor: pointer;
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #606266;
		transition: all 0.2s;
		position: relative;
	}

	/* 占位符文字顏色 */
	.select-trigger.placeholder {
		color: #c0c4cc;
	}

	/* 箭頭樣式 */
	.select-arrow {
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 12px;
		color: #c0c4cc;
		transition: transform 0.2s;
	}

	/* 激活狀態的箭頭 */
	.custom-select.active .select-arrow {
		transform: translateY(-50%) rotate(180deg);
		color: #409eff;
	}

	/* 下拉框激活狀態 */
	.custom-select.active .select-trigger {
		border-color: #409eff;
	}

	/* 禁用狀態 */
	.select-trigger.disabled {
		background-color: #f5f7fa;
		border-color: #e4e7ed;
		color: #c0c4cc;
		cursor: not-allowed;
	}

	/* 下拉面板 */
	.select-dropdown {
		position: absolute;
		top: calc(100% + 5px);
		left: 0;
		right: 0;
		background: white;
		border: 1px solid #e4e7ed;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 1000;
		margin: 0;
		padding: 5px 0;
	}

	/* 下拉選項容器 */
	.select-options {
		max-height: 274px;
		overflow-y: auto;
		padding: 6px 0;
	}

	/* 下拉選項 */
	.select-option {
		height: 34px;
		line-height: 34px;
		padding: 0 20px;
		font-size: 14px;
		color: #606266;
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 選項懸停狀態 */
	.select-option:hover {
		background-color: #f5f7fa;
	}

	/* 選中狀態 */
	.select-option.selected {
		color: #409eff;
		font-weight: 700;
		background-color: #f5f7fa;
	}

	/* 自定義滾動條 */
	.select-options::-webkit-scrollbar {
		width: 6px;
	}

	.select-options::-webkit-scrollbar-track {
		background: #fff;
	}

	.select-options::-webkit-scrollbar-thumb {
		background: #e4e7ed;
		border-radius: 3px;
	}

	.select-options::-webkit-scrollbar-thumb:hover {
		background: #c0c4cc;
	}

	/* 生日選擇器特殊樣式 */
	.birthday-selects {
		display: flex;
		gap: 12px;
	}

	.birthday-selects .custom-select {
		flex: 1;
	}

	/* 懸停效果 */
	.select-trigger:hover:not(.disabled) {
		border-color: #c0c4cc;
	}

	/* 聚焦效果 */
	.custom-select.active .select-trigger:not(.disabled) {
		border-color: #409eff;
	}

	/* 錯誤狀態 */
	.custom-select.error .select-trigger {
		border-color: #f56c6c;
	}

	/* 下拉框動畫 */
	.select-dropdown {
		transform-origin: center top;
		animation: dropDown 0.2s ease-in-out;
	}

	@keyframes dropDown {
		0% {
			transform: scaleY(0);
			opacity: 0;
		}

		100% {
			transform: scaleY(1);
			opacity: 1;
		}
	}


	/* Add new styles */
	.page-container {
		display: flex;
		/* display: flex; */
		/* max-width: 100%; */
		margin: 0 auto;
		gap: 20px;
		padding: 88rpx 15px;
	}

	.side-menu { 
		width: 200px;
		background-color: #ffffff;
		padding: 0;
		height: fit-content;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		margin-top: 0px;
		margin-left: 16%; 
	}

	.menu-item {
		padding: 15px 20px;
		cursor: pointer;
		transition: all 0.3s;
		border-left: 4px solid transparent;
	}

	.menu-item:hover {
		background-color: #f5f5f5;
	}

	.menu-item.active {
		background-color: #f0f0f0;
		border-left-color: #81D8D0;
		font-weight: bold;
	}

	.main-content {}

	.main-content.with-menu {
		/* margin-left: 200px; */
		width: 100%;  
	} 
	/* Add new styles for tab content */
	.content-container {
		width: 50%;
		margin: 30px auto;
		padding: 40px;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	}

	.empty-state {
		text-align: center;
		padding: 40px;
		color: #999;
		font-size: 14px;
	}

	.signup-list,
	.history-list {
		min-height: 200px;
	}


	/* Add style for logout menu item */
	.menu-item:last-child {
		margin-top: auto;
		border-top: 1px solid #e0e0e0;
	}

	/* Add styles for sunMenu container */
	.sun-menu-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background-color: #fff;
	}

	/* 更新移動端菜單樣式 */
	.mobile-menu {
		width: 100%;
		background-color: #ffffff;
		padding: 15px 24rpx;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		margin: 0 0 15px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

	.mobile-menu .menu-item {
		flex: 0 0 calc(50% - 5px);
		text-align: center;
		padding: 12px 15px;
		background-color: #f8f9fa;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.3s;
		font-size: 14px;
	}

	.mobile-menu .menu-item.active {
		background-color: #81D8D0;
		color: white;
	}

	.mobile-menu .menu-item:hover {
		opacity: 0.9;
	}

	/* 更新響應式樣式 */
	@media screen and (max-width: 768px) {
		select {
			font-size: 16px;
		}

		.birthday-selects {
			gap: 8px;
		}

		.birthday-selects .uni-input {
			font-size: 16px;
			/* 防止 iOS 縮放 */
			padding-right: 20px;
		}

		.select-trigger {
			height: 88rpx;
			line-height: 36px;
		}

		.select-option {
			height: 30px;
			line-height: 30px;
		}

		.birthday-selects {
			gap: 8px;
		}

		.content-container {
			margin: 15px; 
			padding: 40rpx 24rpx;
			margin: 15px 0;
		}

		.register-container {
			width: 100%;
			padding: 20rpx;

		}

		.form-row {
			flex-direction: column;
			gap: 15px;
		}

		.half {
			width: 100%;
		} 

		.mobile-menu {
			margin-top: -60rpx;
		}
	}

	/* 更新登出按鈕樣式 */
	.mobile-menu .menu-item:last-child {
		background-color: #FFB6C1;
		/* 使用稍深一點的粉紅色，以提供更好的對比度 */
		color: white;
		/* 文字改為白色 */
	}

	.mobile-menu .menu-item:last-child:hover {
		background-color: #FF9AA2;
		/* hover時顏色稍深 */
		color: white;
	}

	.mobile-menu .menu-item:last-child.active {
		background-color: #FF8396;
		/* 選中狀態的顏色 */
		color: white;
	}

	/* Add styles for signup cards */
	.signup-cards {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 20px;
		padding: 10px;
	}

	.signup-card {
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		transition: transform 0.2s ease;
	}

	.signup-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	.card-header {
		padding: 15px;
		background: #f8f9fa;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-number {
		font-size: 14px;
		color: #666;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 70%;
	}

	.status-tag {
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 500;
		flex-shrink: 0;
	}

	.status-pending {
		background: #fff3e0;
		color: #ff9800;
	}

	.status-paid {
		background: #e8f5e9;
		color: #4caf50;
	}

	.status-refunded {
		background: #ede7f6;
		color: #673ab7;
	}

	.status-cancelled {
		background: #fbe9e7;
		color: #f44336;
	}

	.card-content {
		padding: 15px;
	}

	.info-row {
		display: flex;
		margin-bottom: 10px;
		line-height: 1.5;
		min-width: 0; /* 确保flex子元素可以正确收缩 */
	}

	.info-row:last-child {
		margin-bottom: 0;
	}

	.label {
		color: #666;
		font-size: 14px;
		width: 80px;
		flex-shrink: 0;
	}

	.value {
		color: #333;
		font-size: 14px;
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0; /* 确保文本可以正确收缩 */
	}

	.value.price {
		color: #f44336;
		font-weight: 500;
	}

	/* 添加悬停提示效果 */
	.value {
		position: relative;
	}

	.value:hover {
		overflow: visible;
		white-space: normal;
		word-break: break-all;
		z-index: 1;
		background: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 2px 4px;
		border-radius: 4px;
		margin: -2px -4px;
	}

	/* Responsive styles for signup cards */
	@media screen and (max-width: 768px) {
		.signup-cards {
			grid-template-columns: 1fr;
			gap: 15px;
			padding: 10px 0;
		}

		.signup-card {
			margin: 0 10px;
		}

		.info-row {
			margin-bottom: 8px;
		}

		.label {
			width: 70px;
			font-size: 13px;
		}

		.value {
			font-size: 13px;
		}
	}

	.vip-level {
		font-size: 16px;
		color: #333;
		padding: 10px;
		background-color: #f8f9fa;
		border-radius: 6px;
		border: 1px solid #e2e8f0;
	}
</style>